<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>reg</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 22%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-content{
				background-color:rgb(117,195,235);
			}
		
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>账号</label>
					<input id='u_username' type="text" class="mui-input-clear mui-input" maxlength="16" placeholder="请输入账号(8~16位)">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id='u_password' type="password" class="mui-input-password" maxlength="16" placeholder="请输入密码(8~16位)">
				</div>
				<div class="mui-input-row">
					<label>确认</label>
					<input id='password_confirm' type="password" class="mui-input-clear mui-input" maxlength="16" placeholder="请确认密码">
				</div>	
			</form>
			<h4>设置密保</h4>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label style="width: 30%;">问题选择</label>
					<select id='u_question' name="select" style="width: 190px;float: left;">
						<option value="你母亲的名字？" selected="true">你母亲的名字？</option>
						<option value="你父亲的名字？">你父亲的名字？</option>
						<option value="你班主任的名字？">你班主任的名字？</option>
						<option value="你母校的名字？">你母校的名字？</option>
						<option value="你的名字？">你的名字？</option>
					</select>
				</div>
				<div class="mui-input-row">
					<label style="width: 30%;">设置答案</label>
					<input id='u_answer' style="width: 70%;"type="text" class="mui-input-clear mui-input" maxlength="10" placeholder="请输入答案(最多10字)">
				</div>
			</form>
			<h4>绑定手机</h4>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label style="width: 30%;">手机号码</label>
					<input id='u_phone' style="width: 70%;"type="text" class="mui-input-clear mui-input" maxlength="11" placeholder="请输入11位手机号">
				</div>
				<div class="mui-input-row">	
					<button id="getyzm" type="button" class="mui-btn mui-btn-primary" style="width: 130px;left: 10px;float: left;">
						获取验证码
					</button>
					<input id='yzm' style="width: 50%;float: right;" type="text" maxlength="6" class="mui-input-clear mui-input" placeholder="请输入验证码">	
				</div>
			</form>
			<div class="mui-content-padded">
				<button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注   册</button>
			</div>			
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/DHJ.js"></script>
		<script>
			//mui初始化
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			//获取验证码按钮事件
			document.getElementById("getyzm").addEventListener('tap',function(){
				var u_username = document.getElementById('u_username').value;
				var u_password = document.getElementById('u_password').value;
				var password_confirm = document.getElementById('password_confirm').value;
				var u_question = document.getElementById('u_question').value;
				var u_answer = document.getElementById('u_answer').value;
				var u_phone = document.getElementById('u_phone').value;
				var yzm = document.getElementById('yzm').value;
				var phone = /^1[3|4|5|7|8][0-9]\d{4,8}$/;
				if (u_username.length<8) {
					mui.alert('你的账号不足8位');
				}else if (u_password.length<8) {
					mui.alert('你的密码不足8位');
				}else if (u_answer.length<1) {
					mui.alert('答案不可为空');
				}else if (!phone.test(u_phone)) {
					mui.alert('请输入正确的手机号');
				}else if (u_password != password_confirm) {
					mui.alert('两次密码不一致');
				}else{
					mui.ajax({
						url:locationIP+'phoneMessageZ',
						data:{														
							uPhone:u_phone						
						},
						dataType:'json',
						type:'post',
						success:function(data){
							
						},
						error: function(xhr,type,errorThrown){
			                mui.toast(type);
			            }						
					});	
				}		
			});
			document.getElementById("reg").addEventListener('tap', function() {
				var u_username = document.getElementById('u_username').value;
				var u_password = document.getElementById('u_password').value;
				var password_confirm = document.getElementById('password_confirm').value;
				var u_question = document.getElementById('u_question').value;
				var u_answer = document.getElementById('u_answer').value;
				var u_phone = document.getElementById('u_phone').value;
				var yzm = document.getElementById('yzm').value;
				var phone = /^1[3|4|5|7|8][0-9]\d{4,8}$/;
				if (u_username.length<8) {
					mui.alert('你的账号不足8位');
				}else if (u_password.length<8) {
					mui.alert('你的密码不足8位');
				}else if (u_answer.length<1) {
					mui.alert('答案不可为空');
				}else if (!phone.test(u_phone)) {
					mui.alert('请输入正确的手机号');
				}else if (yzm.length<1) {
					mui.alert('请输入验证码');
				}else if (u_password != password_confirm) {
					mui.alert('两次密码不一致');
				}else{
					mui.ajax({
						url:locationIP+'reg',
						data:{
							username:u_username,
							pwd:u_password,
							uQuestion:u_question,
							uAnswer:u_answer,
							uPhone:u_phone,
							yzm:yzm
						},
						dataType:'json',
						type:'post',
						success:function(data){
							//查看获取的数据状态
							console.log(JSON.stringify(data));
							if(data==1){
								mui.alert("用户已被注册");
							}else if(data==2){
								mui.alert("验证码或手机号错误");
							}else{
								mui.alert('注册成功',function(){
									mui.openWindow({
										url:'index.html',
										id:'index.html'				
									});
								});						
							}
						},
						error: function(xhr,type,errorThrown){
			                mui.toast(type);
			            }						
					});	
				}		
			});
		</script>
	</body>

</html>